<template>
  <div class="baitaiwangzhe">
    <!-- autoplay -->
    <div class="videoBox">
      <video class="videoPlay"
             autoplay
             id="videoPlay"
             src="http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_9e7140f5d96140b5903741e0ac4e5ecd.f0.mp4?vkey=15326657575AEF9BC47640CBAF9234EE77F46EEC4E1D0CC2FA8D852B33176170E27126DE01E0EA67A093FA0AF535B0B2B72A53C1E1E1F167B4114BB84644BEEB163897339989EDA587739F33073A16BC3007783344C31F2D&sha=0"></video>
    </div>
    <div class="wrapper">
      <div class="cont-part">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg1.jpg"
             alt="">
      </div>
      <div class="cont-part2">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg2.jpg"
             alt="">
        <div class="con_nav">
          <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_nav1.png"
               alt="">
          <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_nav2.png"
               alt="">
          <ul class="nav_list">
            <li title="百态幕后"
                v-for="item in moudulelist"
                :key="item.id"
                :class="`title${item.id}`"
                @click="aClick(item.id)"></li>
          </ul>
        </div>
        <div class="slidebar"
             id="bt_li">
          <ul class="slidelist">
            <li v-for="item in storylist"
                :key="item.id"
                :class="`slideLi${item.id} slideLi`"
                @mouseenter="slideMouse"
                @mouseleave="slideMouseLeave">
              <img class="innnerLi"
                   @click="slideClick"
                   :src="item.src" />
              <div :class="`playvideo playvideo${item.id}`">
                <div :class="`video_descript video_descript${item.id}`"></div>
                <div class="real_video">
                </div>
                <span class="slide_back"
                      @click="backClick"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cont-part3"
           id="bt_li2">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg3.jpg"
             alt="">
      </div>
      <div class="cont-part4"
           id="bt_li3">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg4.jpg"
             alt="">
        <template>
          <el-carousel :interval="4000"
                       :autoplay="false"
                       type="card"
                       height="200px">
            <el-carousel-item v-for="item in behindScene"
                              :key="item.id">
              <img :src="item.src"
                   alt="">
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
      <div class="cont-part5"
           id="bt_li4">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg5.jpg"
             alt="">
        <div class="yz_box">
          <ul>
            <li>
              <img src="//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/yz_code1.jpg"
                   width="243"
                   height="243"
                   alt="二维码">
              <img src="//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/pt5_img1.png"
                   alt="扫码用微信记录">
            </li>
            <li>
              <img src="//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/yz_code2.jpg"
                   width="243"
                   height="243"
                   alt="二维码">
              <img src="//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/pt5_img2.png"
                   alt="扫码用QQ记录">
            </li>
          </ul>
        </div>
      </div>
      <div class="cont-part6">
        <img src="https://game.gtimg.cn/images/yxzj/cp/a20171023pvppc/logo.png"
             alt="">
        <div class="foot_text">
          <p>COPYRIGHT © 1998 – 2018 TENCENT. ALL RIGHTS RESERVED. 腾讯公司 版权所有</p>
          <p>粤网文[2017]6138-1456号 &amp; ISBN 978-7-7979-8408-9 | 新出网证（粤）字010号 | 文网游备字[2016]M-CSG 0059</p>
          <p>批准文号：新广出审[2017] 6712号 | 全国文化市场统一举报电话：12318</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    storylist: [],
    flag: true,
    behindScene: [],
    moudulelist: []
  }),
  created () {
    this.getstory()
    this.getmuhou()
    this.listenerFunction()
  },
  mounted () {
    document.querySelector('.header').style.display = 'none'
    document.querySelector('.el-carousel__container').setAttribute('style', 'height:286px;')
    // document.querySelector('.el-carousel__indicators--outside').remove()
    document.querySelector('.el-carousel__indicators--outside').setAttribute('style', 'display:none;')
    document.querySelectorAll('.el-carousel__arrow ')[0].setAttribute('style', 'background-color:#948A79;font-size:30px;color:#292D33;')
    document.querySelectorAll('.el-carousel__arrow ')[1].setAttribute('style', 'background-color:#948A79;font-size:30px;color:#292D33;')
    let video = document.getElementById('videoPlay')
    video.addEventListener('ended', function () {
      document.querySelector('.videoBox').style.display = 'none'
      document.querySelector('body').setAttribute('style', 'margin:0;min-width:1240px;overflow:visible;')
    }, false)
  },
  // 创建前设置
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'margin:0;min-width:1240px; overflow:hidden;')
    // document.querySelector('.header').remove()
  },
  // 销毁前清除
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
    document.removeEventListener('scroll', this.listenerFunction)
  },
  methods: {
    async getstory () {
      const { data: { story, status, moduleName } } = await this.$axios.get('/getstory')
      if (status !== 1) return
      this.storylist = story
      this.moudulelist = moduleName
    },
    async getmuhou () {
      const { data: { muhou, status } } = await this.$axios.get('/getmuhou')
      if (status !== 1) return
      this.behindScene = muhou
    },
    slideClick (e) {
      e.currentTarget.parentNode.parentNode.childNodes.forEach(el => {
        el.style.width = '0%'
      })
      e.currentTarget.parentNode.style.display = 'block'
      // e.currentTarget.parentNode.childNodes[0].nextSibling.style.display = 'block'
      e.currentTarget.parentNode.style.width = '100%'
      e.currentTarget.parentNode.childNodes[0].nextSibling.style.width = '75%'
      // let timer = setTimeout(() => {
      //   if (e.currentTarget.parentNode.style.width === '100%') {
      //     clearInterval(timer)
      //   }
      // }, 200)
    },
    slideMouse (e) {
      e.target.style.opacity = '1'
    },
    slideMouseLeave (e) {
      e.target.style.opacity = '0.6'
    },
    backClick (e) {
      e.currentTarget.parentNode.parentNode.parentNode.childNodes.forEach(el => {
        el.style.display = 'block'
        el.style.width = '25%'
      })
      e.currentTarget.parentNode.style.width = '0%'
    },
    listenerFunction (e) {
      document.addEventListener('scroll', this.handleScroll, true)
    },
    handleScroll () {
      // console.log(document.querySelector('.nav_list').offsetTop)
      if (window.pageYOffset > 527) {
        document.querySelector('.con_nav').style.position = 'fixed'
        document.querySelector('.con_nav').style.width = '100%'
        document.querySelector('.con_nav').style.top = '-55px'
      } else {
        document.querySelector('.con_nav').style.position = 'absolute'
        document.querySelector('.con_nav').style.top = '-49px'
      }
    },
    aClick (id) {
      let target = document.querySelector(`.cont-part${id + 1}`).offsetTop
      let current = window.scrollY
      let timer = setInterval(() => {
        let step = target > current ? parseInt(Math.ceil((target - current) / 10)) : parseInt(Math.ceil((target - current) / 10))
        current += step
        window.scrollTo(0, current)
        if (Math.abs(target - current) <= 10) {
          clearInterval(timer)
          window.scrollTo(0, target)
          console.log(1)
        }
      }, 10)
    }
  },
  updated () {

  }
}
</script>
<style lang="less" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
img {
  display: block;
}
.baitaiwangzhe {
  margin-top: 42px;
  //页面开始就播放视频
  .videoBox {
    // display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    background-color: #000;
    .videoPlay {
      height: 150%;
      position: absolute;
      left: 50%;
      margin-left: -66%;
      margin-top: -10%;
      z-index: 101;
    }
  }
  .wrapper {
    .cont-part {
      img {
        width: 100%;
      }
    }
    .cont-part2 {
      position: relative;
      img {
        width: 100%;
      }
      .con_nav {
        position: absolute;
        top: -49px;
        z-index: 20;
      }
      .nav_list {
        width: 62%;
        position: absolute;
        left: 50%;
        top: 54px;
        margin-left: -31%;
        li {
          float: left;
          width: 20%;
          height: 54px;
          a {
            display: inline-block;
            width: 100%;
            height: 54px;
          }
        }
        .title3 {
          margin-left: 172px;
        }
      }
      //百态故事
      .slidebar {
        width: 1200px;
        position: absolute;
        left: 50%;
        margin-left: -600px;
        height: 620px;
        // overflow: hidden;
        top: 7.6%;
        background-color: #191d22;
        top: 59px;
        .slidelist {
          width: 100%;
          height: 620px;
          overflow: hidden;
          li {
            float: left;
            width: 25%;
            height: 620px;
            overflow: hidden;
            opacity: 0.6;
            transition: width 0.3s ease;
            .innnerLi {
              float: left;
              width: 300px;
              height: 1254px;
            }
            .innnerLi1 {
              background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gs_list1.jpg) no-repeat center top;
              background-size: 103%;
            }
            .innnerLi2 {
              background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gs_list2.jpg) no-repeat center top;
              background-size: 103%;
            }
            .innnerLi3 {
              background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gs_list3.jpg) no-repeat center top;
              background-size: 103%;
            }
            .innnerLi4 {
              background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gs_list4.jpg) no-repeat center top;
              background-size: 103%;
            }
            .playvideo {
              float: left;
              width: 0%;
              height: 620px;
              position: relative;
              overflow: hidden;
              transition: width 1s ease;
              .video_descript {
                background-image: url('//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gs_text.png');
                height: 153px;
                width: 685px;
                margin: 0;
                margin-top: 69px;
                background-size: 668px 704px;
                background-repeat: no-repeat;
              }
              .video_descript1 {
                background-position: 39px -393px;
              }
              .video_descript2 {
                background-position: 39px -577px;
              }
              .video_descript3 {
                background-position: 39px -236px;
              }
              .video_descript4 {
                background-position: 39px -39px;
              }
              .real_video {
                background: #fff;
                margin-left: 69px;
                height: 326px;
                width: 600px;
                float: left;
              }
              .slide_back {
                margin-top: 37px;
                margin-left: 20px;
                display: inline-block;
                width: 113px;
                height: 135px;
                background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/gx_back.png) no-repeat 0 0;
                background-size: 100%;
              }
            }
          }
        }
      }
    }
    .cont-part3 {
      img {
        width: 100%;
      }
    }
    .cont-part4 {
      position: relative;
      img {
        width: 100%;
      }
      .el-carousel {
        position: absolute;
        top: 285px;
        left: 50%;
        margin-left: -350px;
        width: 700px;
      }
      .el-carousel__item img {
        height: 286px;
        margin: 0;
      }
      // .el-carousel--horizontal {
      //   overflow-x: visible;
      // }

      // .el-carousel__item:nth-child(2n) {
      // }

      // .el-carousel__item:nth-child(2n + 1) {
      // }
      .el-carousel__indicators--outside {
        display: none;
      }
      // .el-carousel__arrow {
      //   width: 70px;
      //   border-radius: none;
      //   background-image: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/spr.png);
      //   background-position: -51px 11px;
      //   background-size: 336%;
      // }
    }
    .cont-part5 {
      position: relative;
      img {
        width: 100%;
      }
      .yz_box {
        position: absolute;
        bottom: 65px;
        left: 50%;
        width: 52%;
        height: 200px;
        margin-left: -26%;
        ul {
          height: 200px;
          width: 418px;
          position: relative;
          left: 50%;
          margin-left: -209px;
          li {
            margin: 0 7%;
            float: left;
            img {
              width: 150px;
              height: auto;
            }
          }
        }
      }
    }
    .cont-part6 {
      background: url(//game.gtimg.cn/images/yxzj/cp/a20171023pvppc/con_bg6.jpg) #1b1f26 no-repeat center top;
      padding-top: 64px;
      padding-bottom: 40px;
      img {
        width: 64%;
        margin: 0 19%;
      }
      .foot_text {
        color: #676767;
        text-align: center;
        margin-top: 60px;
      }
    }
    //百态故事动画
    .story-enter,
    .story-leave-to {
      width: 0%;
      opacity: 0;
    }
    .story-enter-to,
    .story-leave {
      width: 75%;
      opacity: 1;
    }
    .story-enter-active,
    .story-leave-active {
      transition: 1s all ease;
    }
  }
}
</style>
